<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Range | Onsen UI</title>
  <link href='https://fonts.googleapis.com/css?family=Roboto:400,300italic,300,400italic,500,500italic,700,700italic' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="../../build/css/onsenui.css">
  <link rel="stylesheet" href="../../build/css/onsen-css-components.css">

  <script src="../../build/js/onsenui.js"></script>

</head>

<body>
  <ons-page>
    <ons-toolbar>
      <div class="center">Range sliders</div>
    </ons-toolbar>

    <p>
      <ons-row>
        <ons-col width="40px" style="text-align: center; line-height: 31px;">
          <ons-icon icon="md-volume-down"></ons-icon>
        </ons-col>
        <ons-col>
          <ons-range style="width: 100%;" value="25"></ons-range>
        </ons-col>
        <ons-col width="40px" style="text-align: center; line-height: 31px;">
          <ons-icon icon="md-volume-up"></ons-icon>
        </ons-col>
      </ons-row>
      <ons-row style="margin-top: 20px;">
        <ons-col width="40px" style="text-align: center; line-height: 31px;">
          <ons-icon icon="md-brightness-low"></ons-icon>
        </ons-col>
        <ons-col>
          <ons-range style="width: 100%;" value="50"></ons-range>
        </ons-col>
        <ons-col width="40px" style="text-align: center; line-height: 31px;">
          <ons-icon icon="md-brightness-high"></ons-icon>
        </ons-col>
      </ons-row>
      <ons-row style="margin-top: 20px;">
        <ons-col width="40px" style="text-align: center; line-height: 31px;">
          <ons-icon icon="md-thumb-down"></ons-icon>
        </ons-col>
        <ons-col>
          <ons-range disabled style="width: 100%;" value="75"></ons-range>
        </ons-col>
        <ons-col width="40px" style="text-align: center; line-height: 31px;">
          <ons-icon icon="md-thumb-up"></ons-icon>
        </ons-col>
      </ons-row>
    </p>
  </ons-page>
</body>
</html>
